<template>
  <div class="content">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item
        label="演员姓名"
        prop="actor_name"
      >
        <el-input
          v-model="form.actor_name"
          clearable
          placeholder="请输入演员姓名"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="饰演角色"
        prop="role_name"
      >
        <el-input
          v-model="form.role_name"
          clearable
          placeholder="请输入饰演角色"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="演员简介"
        prop="actor_introduction"
      >
        <template slot="label">
          <span>演员信息</span>
          <el-tooltip
            class="item"
            effect="dark"
            placement="top"
          >
            <div
              slot="content"
              class="tooltipLine"
            >
              <p>演员简介，填写内容可参考：生日、星座、籍贯、身高、毕业院校、历史/代表作品、获奖信息、成就等(以上要素需至少满足3项或涵盖任一要素且不少于20字）。</p>
              <p>格式要求：可填写100个字符，支持输入中文、英文、阿拉伯数字及，。：；“”？、—《》！（）-·</p>
            </div>
            <i
              class="el-icon-question"
              style="margin-left:2px;font-size:16px;"
            ></i>
          </el-tooltip>
        </template>
        <el-input
          v-model="form.actor_introduction"
          clearable
          maxlength="100"
          type="textarea"
          placeholder="请输入简介内容"
          :show-word-limit="true"
          style="width:100%;height: 100px;"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="演员照片"
        prop="actor_photo"
      >
        <upload
          tip="支持.jpg .bmp .gif .png 格式，单个文件大小不超过 10MB(建议尺寸为 240*240px)"
          type="image"
          :url="form.actor_photo"
          @resultUpload="resultUpload"
        />
      </el-form-item>

    </el-form>
    <div class="dialog-footer rowFlex">
      <div class="btns">
        <el-button
          class="btn"
          @click="close"
        >取 消</el-button>
        <el-button
          class="btn"
          type="primary"
          @click="onSubmit"
        > 确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import upload from '@/common/component/upload.vue'
export default {
  components: {
    upload: upload
  },
  props: {
    rowInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      form: {
        actor_name: '',
        role_name: '',
        actor_introduction: '',
        actor_photo: ''
      },
      rules: {
        actor_name: [{ required: true, message: '请输入演员姓名', trigger: 'blur' }],
        role_name: [{ required: true, message: '请输入饰演角色', trigger: 'blur' }],
        actor_introduction: [{ required: true, message: '请输入演员简介', trigger: 'change' }],
        actor_photo: [{ required: true, message: '请上传演员照片', trigger: 'change' }]
      }
    }
  },
  mounted() {
    if (this.rowInfo.index || this.rowInfo.index === 0) {
      console.log(this.rowInfo)

      this.form = JSON.parse(JSON.stringify(this.rowInfo))
      console.log(this.form, '**********************************')
    }
  },
  methods: {
    // 上传的结果
    resultUpload(data, type) {
      console.log(data, type)
      this.form.actor_photo = data
    },
    close() {
      this.$emit('cancel')
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('ok', { data: this.form, index: this.rowInfo.index })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  padding: 20px;
}
::v-deep .el-textarea__inner {
  height: 100% !important;
}
</style>